<template>
  <div class="comment-container">
    <!-- 评论标题部分 -->
    <div class="comment-header">
      <h3 class="comment-title">
        评论
        <span class="comment-count">1529</span>
      </h3>
      <div class="comment-tabs">
        <span class="tab active">最热</span>
        <span class="separator">|</span>
        <span class="tab">最新</span>
      </div>
    </div>

    <!-- 评论输入区域 -->
    <div class="comment-input-area">
      <div class="user-avatar">
        <img :src="avatar10" alt="用户头像" />
      </div>
      <div class="input-wrapper">
        <div
          class="comment-textarea"
          contenteditable="true"
          ref="commentEditor"
          @input="updateCommentText"
          :placeholder="'发一条友善的评论'"
        ></div>
        <div class="input-tools">
          <div class="left-tools">
            <div class="tool-btn emoji-btn" @click="toggleEmojiPanel">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M9 9H9.01"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M15 9H15.01"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
            <div class="tool-btn at-btn" @click="toggleAtPanel">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M16 7.99999V13C16 14.0609 16.4214 15.0783 17.1716 15.8284C17.9217 16.5786 18.9391 17 20 17C21.0609 17 22.0783 16.5786 22.8284 15.8284C23.5786 15.0783 24 14.0609 24 13V12C24 9.34783 22.9464 6.8043 21.0711 4.92893C19.1957 3.05357 16.6522 2 14 2C11.3478 2 8.8043 3.05357 6.92893 4.92893C5.05357 6.8043 4 9.34783 4 12C4 14.6522 5.05357 17.1957 6.92893 19.0711C8.8043 20.9464 11.3478 22 14 22"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
            <div class="tool-btn image-btn" @click="openImageSelector">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M21 15L16 10L5 21"
                  stroke="#757575"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <input
                ref="imageInput"
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleImageSelect"
              />
            </div>
          </div>
          <div class="right-tools">
            <button class="send-btn">发布</button>
          </div>
        </div>

        <!-- 表情选择面板 -->
        <div class="emoji-panel" v-if="showEmojiPanel">
          <div class="emoji-panel-header">
            <span class="active">小黄脸</span>
          </div>
          <div class="emoji-grid">
            <div
              class="emoji"
              v-for="(emoji, index) in emojiList"
              :key="index"
              @click="insertEmoji(emoji)"
            >
              <div class="emoji-icon" v-html="emoji.svg"></div>
            </div>
          </div>
          <div class="emoji-panel-footer">
            <div class="emoji-tabs">
              <div class="tab active">
                <svg
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                    fill="#FFDD67"
                    stroke="#FFAB4A"
                    stroke-width="1"
                  />
                  <path
                    d="M8 13C8 13 9.5 15.5 12 15.5C14.5 15.5 16 13 16 13"
                    stroke="#664E27"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                  <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27" />
                  <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27" />
                </svg>
              </div>
              <div class="tab">
                <svg
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    x="4"
                    y="4"
                    width="16"
                    height="12"
                    rx="2"
                    fill="#008FD5"
                    stroke="#0077B5"
                    stroke-width="1"
                  />
                  <rect
                    x="7"
                    y="16"
                    width="10"
                    height="4"
                    fill="#008FD5"
                    stroke="#0077B5"
                    stroke-width="1"
                  />
                  <circle cx="12" cy="10" r="3" fill="#FFFFFF" />
                </svg>
              </div>
              <div class="tab">
                <svg
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                    fill="#F4AA41"
                    stroke="#D97706"
                    stroke-width="1"
                  />
                  <circle cx="8.5" cy="10" r="1.5" fill="#664E27" />
                  <circle cx="15.5" cy="10" r="1.5" fill="#664E27" />
                  <path
                    d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14"
                    stroke="#664E27"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                  <path
                    d="M7 7L10 5"
                    stroke="#664E27"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                  <path
                    d="M17 7L14 5"
                    stroke="#664E27"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </div>
              <div class="tab">
                <svg
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                    fill="#FF5A79"
                    stroke="#E2264D"
                    stroke-width="1"
                  />
                  <path
                    d="M8 12C8 12 9.5 15 12 15C14.5 15 16 12 16 12"
                    stroke="#FFFFFF"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                  <circle cx="8.5" cy="9" r="1.5" fill="#FFFFFF" />
                  <circle cx="15.5" cy="9" r="1.5" fill="#FFFFFF" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <!-- @用户选择面板 -->
        <div class="at-panel" v-if="showAtPanel">
          <div class="at-panel-header">
            <span>选择或输入你想@的人</span>
          </div>
          <div class="at-list">
            <div
              class="at-user"
              v-for="(user, index) in followingUsers"
              :key="index"
              @click="insertAt(user)"
            >
              <img :src="user.avatar" :alt="user.name" class="at-user-avatar" />
              <div class="at-user-info">
                <div class="at-user-name">{{ user.name }}</div>
                <div class="at-user-fans">{{ user.fans }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <!-- UP主评论 -->
      <div class="comment-item">
        <div class="user-avatar">
          <img :src="upComment.avatar" alt="UP主头像" />
        </div>
        <div class="comment-content">
          <div class="user-info">
            <span class="username">{{ upComment.username }}</span>
            <span class="user-tag">UP</span>
          </div>
          <div class="comment-text">{{ upComment.content }}</div>
          <div class="comment-actions">
            <span class="comment-time">{{ upComment.time }}</span>
            <div
              class="action-btn like"
              :class="{ active: upComment.isLiked }"
              @click="toggleLike(upComment)"
            >
              <i class="like-icon"></i>
              <span>{{ upComment.likes }}</span>
            </div>
            <div
              class="action-btn dislike"
              :class="{ active: upComment.isDisliked }"
              @click="toggleDislike(upComment)"
            >
              <i class="dislike-icon"></i>
            </div>
            <div class="action-btn reply" @click="toggleReply(1)">回复</div>
            <div class="action-btn more">
              <i class="more-icon"></i>
            </div>
          </div>

          <!-- UP主标识 -->
          <div class="up-tag">UP主觉得很赞</div>

          <!-- 回复输入框 -->
          <div v-if="replyingTo === 1" class="reply-input-area">
            <div class="user-avatar">
              <img :src="avatar10" alt="用户头像" />
            </div>
            <div class="input-wrapper">
              <div
                class="comment-textarea"
                contenteditable="true"
                ref="replyEditor"
                @input="updateReplyText"
                :placeholder="`回复 @亚瑟西呵熊蓝：`"
              ></div>
              <div class="input-tools">
                <div class="left-tools">
                  <div
                    class="tool-btn emoji-btn"
                    @click="toggleEmojiPanel(true)"
                  >
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                        stroke="#757575"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14"
                        stroke="#757575"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M9 9H9.01"
                        stroke="#757575"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M15 9H15.01"
                        stroke="#757575"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                </div>
                <div class="right-tools">
                  <button class="send-btn">发布</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 普通评论 -->
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="user-avatar">
          <img :src="comment.avatar" alt="用户头像" />
        </div>
        <div class="comment-content">
          <div class="user-info">
            <span class="username">{{ comment.username }}</span>
            <span v-if="comment.tag" class="user-tag">{{ comment.tag }}</span>
          </div>
          <div class="comment-text" v-html="comment.content"></div>
          <div class="comment-actions">
            <span class="comment-time">{{ comment.time }}</span>
            <div
              class="action-btn like"
              :class="{ active: comment.isLiked }"
              @click="toggleLike(comment)"
            >
              <i class="like-icon"></i>
              <span>{{ comment.likes }}</span>
            </div>
            <div
              class="action-btn dislike"
              :class="{ active: comment.isDisliked }"
              @click="toggleDislike(comment)"
            >
              <i class="dislike-icon"></i>
            </div>
            <div class="action-btn reply" @click="toggleReply(comment.id)">
              回复
            </div>
            <div class="action-btn more">
              <i class="more-icon"></i>
            </div>
          </div>

          <!-- 子评论显示 -->
          <template v-if="comment.replies && comment.replies.length > 0">
            <!-- 默认显示最多2条回复 -->
            <div v-if="!comment.showFullReplies" class="child-comments">
              <div
                v-for="reply in comment.replies.slice(0, 2)"
                :key="reply.id"
                class="comment-item child-comment"
              >
                <div class="user-avatar">
                  <img :src="reply.avatar" alt="用户头像" />
                </div>
                <div class="comment-content">
                  <div class="user-info">
                    <span class="username">{{ reply.username }}</span>
                  </div>
                  <div class="comment-text">
                    <span class="reply-to">回复 @{{ reply.replyTo }}：</span>
                    {{ reply.content }}
                  </div>
                  <div class="comment-actions">
                    <span class="comment-time">{{ reply.time }}</span>
                    <div
                      class="action-btn like"
                      :class="{ active: reply.isLiked }"
                      @click="toggleLike(reply)"
                    >
                      <i class="like-icon"></i>
                      <span>{{ reply.likes }}</span>
                    </div>
                    <div
                      class="action-btn dislike"
                      :class="{ active: reply.isDisliked }"
                      @click="toggleDislike(reply)"
                    >
                      <i class="dislike-icon"></i>
                    </div>
                    <div
                      class="action-btn reply"
                      @click="toggleReply(reply.id, true, reply.username)"
                    >
                      回复
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 展开所有回复后的分页显示 -->
            <div v-else class="child-comments">
              <div
                v-for="reply in getPagedReplies(comment.id, comment.replies)"
                :key="reply.id"
                class="comment-item child-comment"
              >
                <div class="user-avatar">
                  <img :src="reply.avatar" alt="用户头像" />
                </div>
                <div class="comment-content">
                  <div class="user-info">
                    <span class="username">{{ reply.username }}</span>
                  </div>
                  <div class="comment-text">
                    <span class="reply-to">回复 @{{ reply.replyTo }}：</span>
                    {{ reply.content }}
                  </div>
                  <div class="comment-actions">
                    <span class="comment-time">{{ reply.time }}</span>
                    <div
                      class="action-btn like"
                      :class="{ active: reply.isLiked }"
                      @click="toggleLike(reply)"
                    >
                      <i class="like-icon"></i>
                      <span>{{ reply.likes }}</span>
                    </div>
                    <div
                      class="action-btn dislike"
                      :class="{ active: reply.isDisliked }"
                      @click="toggleDislike(reply)"
                    >
                      <i class="dislike-icon"></i>
                    </div>
                    <div
                      class="action-btn reply"
                      @click="toggleReply(reply.id, true, reply.username)"
                    >
                      回复
                    </div>
                  </div>
                </div>
              </div>

              <!-- 分页控制 -->
              <div
                v-if="comment.replies.length > REPLIES_PER_PAGE"
                class="pagination"
              >
                <div class="page-info">
                  共{{ comment.replies.length }}条回复
                </div>
                <div class="page-controls">
                  <span
                    v-for="page in getTotalPages(comment.replies.length)"
                    :key="page"
                    :class="[
                      'page-number',
                      currentPage[comment.id] === page ? 'active' : '',
                    ]"
                    @click="changePage(comment.id, page)"
                  >
                    {{ page }}
                  </span>
                  <span
                    v-if="
                      currentPage[comment.id] <
                      getTotalPages(comment.replies.length)
                    "
                    class="page-nav next"
                    @click="changePage(comment.id, currentPage[comment.id] + 1)"
                  >
                    下一页
                  </span>
                </div>
              </div>
            </div>

            <!-- 查看更多回复链接 -->
            <div class="view-all-replies" @click="toggleReplies(comment.id)">
              {{
                comment.showFullReplies
                  ? '收起'
                  : `共 ${comment.replies.length} 条回复，点击查看`
              }}
            </div>
          </template>

          <!-- 回复输入框 -->
          <div
            v-if="
              replyingTo === comment.id ||
              (comment.replies &&
                comment.replies.some((r) => r.id === replyingTo))
            "
            class="reply-input-area"
          >
            <div class="user-avatar">
              <img src="@/assets/bilibiliavatar.png" alt="用户头像" />
            </div>
            <div class="input-wrapper">
              <textarea
                :placeholder="`回复 @${replyToUsername}：`"
                v-model="replyText"
                class="comment-textarea"
              ></textarea>
              <div class="input-tools">
                <div class="left-tools">
                  <div class="tool-btn emoji-btn">
                    <i class="emoji-icon"></i>
                  </div>
                </div>
                <div class="right-tools">
                  <button class="send-btn">发布</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
// 导入头像
import avatar1 from '@/assets/anime/avatar/avatar1.png'
import avatar2 from '@/assets/anime/avatar/avatar2.png'
import avatar3 from '@/assets/anime/avatar/avatar3.png'
import avatar4 from '@/assets/anime/avatar/avatar4.png'
import avatar5 from '@/assets/anime/avatar/avatar5.png'
import avatar6 from '@/assets/anime/avatar/avatar6.png'
import avatar7 from '@/assets/anime/avatar/avatar7.png'
import avatar8 from '@/assets/anime/avatar/avatar8.png'
import avatar9 from '@/assets/anime/avatar/avatar9.png'
import avatar10 from '@/assets/anime/avatar/avatar10.png'
import avatar11 from '@/assets/anime/avatar/avatar11.png'
import avatar12 from '@/assets/anime/avatar/avatar12.png'
import avatar13 from '@/assets/anime/avatar/avatar13.png'

// 评论相关数据
const commentText = ref('')
const commentEditor = ref<HTMLElement | null>(null)
const replyText = ref('')
const replyEditor = ref<HTMLElement | null>(null)
const sendToDynamic = ref(false)
const replyingTo = ref(0) // 当前回复的评论ID，0表示不在回复状态
const replyToUsername = ref('') // 回复的用户名
const showAllRepliesFor = ref<number[]>([]) // 显示所有回复的评论ID列表
const currentPage = ref<Record<number, number>>({}) // 当前显示的回复页码，键为评论ID，值为页码
const isReplyMode = ref(false)

// UP主评论
const upComment = ref({
  id: 1,
  username: '喵仙人ovo',
  avatar: avatar11,
  content: '搜到无感了',
  time: '2025-03-23 00:45',
  likes: 3293,
  isLiked: false,
  isDisliked: false,
})

// 每页显示的回复数
const REPLIES_PER_PAGE = 10

// 获取当前页显示的回复列表
const getPagedReplies = (commentId: number, replies: any[]) => {
  if (!currentPage.value[commentId]) {
    currentPage.value[commentId] = 1
  }

  const startIndex = (currentPage.value[commentId] - 1) * REPLIES_PER_PAGE
  const endIndex = startIndex + REPLIES_PER_PAGE

  return replies.slice(startIndex, endIndex)
}

// 计算总页数
const getTotalPages = (repliesCount: number) => {
  return Math.ceil(repliesCount / REPLIES_PER_PAGE)
}

// 切换页码
const changePage = (commentId: number, page: number) => {
  currentPage.value[commentId] = page
}

// 切换回复框显示状态
const toggleReply = (commentId: number, isChild = false, username = '') => {
  // 如果已经是回复这条评论，则关闭回复框
  if (replyingTo.value === commentId) {
    replyingTo.value = 0
    replyToUsername.value = ''
  } else {
    // 否则，显示回复框
    replyingTo.value = commentId
    replyToUsername.value =
      username || comments.value.find((c) => c.id === commentId)?.username || ''
  }
  replyText.value = '' // 清空回复内容
}

// 切换展开/收起回复
const toggleReplies = (commentId: number) => {
  const comment = comments.value.find((c) => c.id === commentId)
  if (comment) {
    comment.showFullReplies = !comment.showFullReplies
    if (comment.showFullReplies) {
      // 重置到第一页
      currentPage.value[commentId] = 1
    }
  }
}

// 显示所有子回复
const showAllReplies = (commentId: number) => {
  if (!showAllRepliesFor.value.includes(commentId)) {
    showAllRepliesFor.value.push(commentId)
  }
}

// 切换点赞状态
const toggleLike = (item: any) => {
  if (item.isLiked) {
    item.likes--
    item.isLiked = false
  } else {
    if (item.isDisliked) {
      item.isDisliked = false
    }
    item.likes++
    item.isLiked = true
  }
}

// 切换点踩状态
const toggleDislike = (item: any) => {
  if (item.isDisliked) {
    item.isDisliked = false
  } else {
    if (item.isLiked) {
      item.likes--
      item.isLiked = false
    }
    item.isDisliked = true
  }
}

// 表情面板相关
const showEmojiPanel = ref(false)
const imageInput = ref<HTMLInputElement | null>(null)
const emojiList = ref([
  {
    name: '微笑',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 13C8 13 9.5 15.5 12 15.5C14.5 15.5 16 13 16 13" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27"/>
    </svg>`,
  },
  {
    name: '笑哭',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 15C8 15 9.5 17 12 17C14.5 17 16 15 16 15" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M6 9C6 9 6 12 8 12C10 12 10 9 10 9" fill="#65B1EF" stroke="#65B1EF" stroke-width="1"/>
      <path d="M14 9C14 9 14 12 16 12C18 12 18 9 18 9" fill="#65B1EF" stroke="#65B1EF" stroke-width="1"/>
      <path d="M6 9L6 11" stroke="#65B1EF" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M18 9L18 11" stroke="#65B1EF" stroke-width="1.5" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '爱心',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 13C8 13 9.5 15 12 15C14.5 15 16 13 16 13" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27"/>
      <path d="M12 5C12 5 9 7 9 10C9 13 12 15 12 15C12 15 15 13 15 10C15 7 12 5 12 5Z" fill="#F74A8A"/>
    </svg>`,
  },
  {
    name: '惊讶',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <circle cx="12" cy="15" r="2.5" fill="#664E27" stroke="#664E27" stroke-width="0.5"/>
      <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27"/>
    </svg>`,
  },
  {
    name: '呆萌',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 14C8 14 9.5 14 12 14C14.5 14 16 14 16 14" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="8.5" y1="9.5" x2="10.5" y2="9.5" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="13.5" y1="9.5" x2="15.5" y2="9.5" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '调皮',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27"/>
      <path d="M17 7C17 7 18 5 20 6" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '喜极而泣',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 15C8 15 9.5 17 12 17C14.5 17 16 15 16 15" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M9 7L9 12" stroke="#65B1EF" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M15 7L15 12" stroke="#65B1EF" stroke-width="1.5" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '思考',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 15C8 15 9 15 12 15C15 15 16 15 16 15" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="8.5" cy="9.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="9.5" r="1.5" fill="#664E27"/>
      <path d="M17 7C17 7 19 8 19 5" stroke="#664E27" stroke-width="1" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '狗狗',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#F4AA41" stroke="#D97706" stroke-width="1"/>
      <path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M6 8L10 8" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M14 8L18 8" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="8.5" cy="10.5" r="1.5" fill="#664E27"/>
      <circle cx="15.5" cy="10.5" r="1.5" fill="#664E27"/>
      <path d="M12 13L12 11" stroke="#664E27" stroke-width="1" stroke-linecap="round"/>
    </svg>`,
  },
  {
    name: '大哭',
    svg: `<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="#FFDD67" stroke="#FFAB4A" stroke-width="1"/>
      <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="#664E27" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M7 8L7 12" stroke="#65B1EF" stroke-width="2" stroke-linecap="round"/>
      <path d="M17 8L17 12" stroke="#65B1EF" stroke-width="2" stroke-linecap="round"/>
    </svg>`,
  },
  // 可以根据需要添加更多
])

// @关注列表相关
const showAtPanel = ref(false)
const followingUsers = ref([
  {
    name: '勾手老夫子的肘哥',
    avatar: 'https://picsum.photos/200/200?random=123',
    fans: '208.6万粉丝',
  },
  {
    name: '林小北Lindo',
    avatar: 'https://picsum.photos/200/200?random=111',
    fans: '182.4万粉丝',
  },
  {
    name: '晓冈ヽ',
    avatar: 'https://picsum.photos/200/200?random=69',
    fans: '56.7万粉丝',
  },
])

// 切换表情面板显示
const toggleEmojiPanel = (forReply = false) => {
  isReplyMode.value = forReply
  showEmojiPanel.value = !showEmojiPanel.value
  if (showEmojiPanel.value) {
    showAtPanel.value = false // 关闭@面板
  }
}

// 切换@面板显示
const toggleAtPanel = () => {
  showAtPanel.value = !showAtPanel.value
  if (showAtPanel.value) {
    showEmojiPanel.value = false // 关闭表情面板
  }
}

// 更新commentText的值
const updateCommentText = () => {
  if (commentEditor.value) {
    commentText.value = commentEditor.value.innerHTML
  }
}

// 更新replyText的值
const updateReplyText = () => {
  if (replyEditor.value) {
    replyText.value = replyEditor.value.innerHTML
  }
}

// 插入表情
const insertEmoji = (emoji: { name: string; svg: string }) => {
  const targetEditor = isReplyMode.value
    ? replyEditor.value
    : commentEditor.value

  if (!targetEditor) return

  // 先备份光标位置和选择
  const selection = window.getSelection()
  const range =
    selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null

  // 创建表情元素
  const emojiElement = document.createElement('span')
  emojiElement.className = 'emoji-display'
  emojiElement.innerHTML = emoji.svg
  emojiElement.style.display = 'inline-block'
  emojiElement.style.width = '20px'
  emojiElement.style.height = '20px'
  emojiElement.style.verticalAlign = 'middle'
  emojiElement.style.margin = '0 2px'

  // 确保SVG尺寸正确
  const svgElement = emojiElement.querySelector('svg')
  if (svgElement) {
    svgElement.setAttribute('width', '20')
    svgElement.setAttribute('height', '20')
  }

  // 把内容插入到编辑器中
  if (range) {
    // 清空选择内容
    range.deleteContents()
    // 插入表情
    range.insertNode(emojiElement)
    // 移动光标到表情后面
    range.setStartAfter(emojiElement)
    range.setEndAfter(emojiElement)
    selection?.removeAllRanges()
    selection?.addRange(range)
  } else {
    // 如果没有选择范围，添加到末尾
    targetEditor.appendChild(emojiElement)
  }

  // 在表情后添加一个空格
  const spaceNode = document.createTextNode(' ')
  if (range) {
    range.insertNode(spaceNode)
    range.setStartAfter(spaceNode)
    range.setEndAfter(spaceNode)
    selection?.removeAllRanges()
    selection?.addRange(range)
  } else {
    targetEditor.appendChild(spaceNode)
  }

  // 更新文本值
  if (isReplyMode.value) {
    updateReplyText()
  } else {
    updateCommentText()
  }

  // 关闭表情面板
  showEmojiPanel.value = false

  // 确保编辑区域获得焦点
  targetEditor.focus()
}

// 插入@用户
const insertAt = (user: { name: string; avatar: string; fans: string }) => {
  const targetEditor = isReplyMode.value
    ? replyEditor.value
    : commentEditor.value

  if (!targetEditor) return

  // 先备份光标位置和选择
  const selection = window.getSelection()
  const range =
    selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null

  // 创建@元素
  const atElement = document.createElement('span')
  atElement.className = 'at-user-display'
  atElement.textContent = `@${user.name}`
  atElement.setAttribute('data-user-id', user.name)
  atElement.style.color = '#00a1d6'
  atElement.style.backgroundColor = 'rgba(0, 161, 214, 0.1)'
  atElement.style.borderRadius = '2px'
  atElement.style.padding = '0 2px'
  atElement.style.margin = '0 2px'
  atElement.style.fontWeight = '500'

  // 把内容插入到编辑器中
  if (range) {
    // 清空选择内容
    range.deleteContents()
    // 插入@标签
    range.insertNode(atElement)
    // 移动光标到@标签后面
    range.setStartAfter(atElement)
    range.setEndAfter(atElement)
    selection?.removeAllRanges()
    selection?.addRange(range)
  } else {
    // 如果没有选择范围，添加到末尾
    targetEditor.appendChild(atElement)
  }

  // 在@标签后添加一个空格
  const spaceNode = document.createTextNode(' ')
  if (range) {
    range.insertNode(spaceNode)
    range.setStartAfter(spaceNode)
    range.setEndAfter(spaceNode)
    selection?.removeAllRanges()
    selection?.addRange(range)
  } else {
    targetEditor.appendChild(spaceNode)
  }

  // 更新文本值
  if (isReplyMode.value) {
    updateReplyText()
  } else {
    updateCommentText()
  }

  // 关闭@面板
  showAtPanel.value = false

  // 确保编辑区域获得焦点
  targetEditor.focus()
}

// 打开图片选择器
const openImageSelector = () => {
  if (imageInput.value) {
    imageInput.value.click()
  }
}

// 处理图片选择
const handleImageSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0]
    // 这里可以上传图片或处理图片预览
    console.log('Selected image:', file.name)
    // 为了简化示例，这里只是记录选择的图片名称
    commentText.value += `[图片:${file.name}]`
  }
}

// 模拟评论数据
const comments = ref([
  {
    id: 2,
    username: '亚瑟西呵熊蓝',
    avatar: avatar1,
    content: '喵喵你现在给我的感觉就像左年bin闭眼享受观众掌声的那张图',
    time: '2025-03-23 00:47',
    likes: 208,
    isLiked: false,
    isDisliked: false,
    showFullReplies: false,
    replies: [
      {
        id: 21,
        username: '路过的猫',
        avatar: avatar2,
        replyTo: '亚瑟西呵熊蓝',
        content: '哈哈哈这个比喻太形象了',
        time: '2025-03-23 01:10',
        likes: 45,
        isLiked: false,
        isDisliked: false,
      },
      {
        id: 22,
        username: '白茶会发光',
        avatar: avatar3,
        replyTo: '亚瑟西呵熊蓝',
        content: '我有同感！',
        time: '2025-03-23 01:15',
        likes: 23,
        isLiked: false,
        isDisliked: false,
      },
      {
        id: 23,
        username: '沉睡的狮子',
        avatar: avatar4,
        replyTo: '亚瑟西呵熊蓝',
        content: '确实很像那张表情',
        time: '2025-03-23 01:30',
        likes: 12,
        isLiked: false,
        isDisliked: false,
      },
    ],
  },
  {
    id: 3,
    username: '名字被取了不知道叫什么好',
    avatar: avatar5,
    content: '还在自摆🦊🦊',
    time: '2025-03-23 00:46',
    likes: 11,
    isLiked: false,
    isDisliked: false,
    showFullReplies: false,
    replies: [],
  },
  {
    id: 4,
    username: '京八桥都长',
    tag: '德云色',
    avatar: avatar6,
    content:
      '在"绝对想不到事件"排名里边，小阳比赛夺冠应该排在龙龙首音复婚前面的。',
    time: '2025-03-23 01:25',
    likes: 1454,
    isLiked: false,
    isDisliked: false,
    showFullReplies: false,
    replies: Array.from({ length: 25 }, (_, i) => ({
      id: 400 + i,
      username: `用户${i + 1}`,
      avatar: avatar7,
      replyTo: '京八桥都长',
      content: `这是第${i + 1}条测试回复`,
      time: '2025-03-23 02:00',
      likes: Math.floor(Math.random() * 100),
      isLiked: false,
      isDisliked: false,
    })),
  },
])
</script>

<style scoped lang="scss">
.comment-container {
  width: 100%;
  color: #222;
  font-size: 14px;
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(220, 120, 120, 0.1);
  border: 1px solid rgba(251, 114, 153, 0.2);
  margin-top: 16px;

  // 评论标题部分
  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ffe0e6;

    .comment-title {
      font-size: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin: 0;
      color: #fb7299;

      .comment-count {
        font-size: 14px;
        color: #fb7299;
        margin-left: 6px;
        font-weight: normal;
        background-color: #fff0f3;
        padding: 2px 8px;
        border-radius: 12px;
      }
    }

    .comment-tabs {
      display: flex;
      align-items: center;

      .tab {
        font-size: 14px;
        color: #c486a1;
        cursor: pointer;
        padding: 0 8px;
        transition: all 0.3s;

        &.active {
          color: #fb7299;
          font-weight: 500;
        }

        &:hover {
          color: #fb7299;
          transform: translateY(-2px);
        }
      }

      .separator {
        color: #ffe0e6;
        margin: 0 8px;
      }
    }
  }

  // 评论输入区域
  .comment-input-area,
  .reply-input-area {
    display: flex;
    margin-top: 16px;
    margin-bottom: 16px;

    .user-avatar {
      width: 48px;
      height: 48px;
      margin-right: 12px;
      flex-shrink: 0;
      border-radius: 50%;
      border: 3px solid #ffe6eb;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(220, 120, 120, 0.15);
      transition: all 0.3s;

      &:hover {
        transform: scale(1.05) rotate(5deg);
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .input-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;

      .comment-textarea {
        width: 100%;
        height: 65px;
        padding: 10px 12px;
        border: 1px solid #ffe0e6;
        background-color: #fff5f7;
        resize: none;
        outline: none;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(251, 114, 153, 0.1);
        overflow-y: auto;
        color: #7f5f69;
        transition: all 0.3s;

        // 支持内容编辑
        -webkit-user-modify: read-write;
        -moz-user-modify: read-write;
        user-modify: read-write;

        &:focus {
          background-color: #fff;
          border-color: #fb7299;
          box-shadow: 0 4px 8px rgba(251, 114, 153, 0.15);
        }

        &:empty:before {
          content: attr(placeholder);
          color: #c486a1;
          pointer-events: none;
        }
      }

      .input-tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;

        .left-tools {
          display: flex;
          align-items: center;

          .tool-btn {
            width: 32px;
            height: 32px;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            background-color: #fff5f7;
            border-radius: 50%;

            &:hover {
              background-color: #ffe0e6;
              transform: translateY(-2px);
            }

            svg {
              width: 20px;
              height: 20px;
              transition: all 0.3s;

              path {
                transition: stroke 0.3s;
              }
            }

            &:hover svg path {
              stroke: #fb7299;
            }
          }
        }

        .right-tools {
          .send-btn {
            background-color: #fb7299;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 6px 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 3px 6px rgba(251, 114, 153, 0.2);

            &:hover {
              background-color: #fc8bab;
              transform: translateY(-2px);
              box-shadow: 0 5px 10px rgba(251, 114, 153, 0.25);
            }

            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }
  }

  // 评论列表
  .comment-list {
    .comment-item {
      display: flex;
      padding: 16px 0;
      border-bottom: 1px solid #ffe0e6;

      .user-avatar {
        width: 48px;
        height: 48px;
        margin-right: 12px;
        flex-shrink: 0;
        border: 2px solid #ffe6eb;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.05);
        }

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .comment-content {
        flex: 1;
        position: relative;

        .user-info {
          margin-bottom: 8px;

          .username {
            font-size: 15px;
            color: #fb7299;
            font-weight: 500;
            margin-right: 8px;
          }

          .user-tag {
            background-color: #fb7299;
            color: white;
            font-size: 12px;
            padding: 0 6px;
            border-radius: 10px;
          }
        }

        .comment-text {
          font-size: 14px;
          line-height: 1.6;
          color: #7f5f69;
          margin-bottom: 10px;
          word-break: break-word;
          padding: 6px 10px;
          background-color: #fff9fa;
          border-radius: 10px;
          border-left: 3px solid #ffe0e6;

          .reply-to {
            color: #fb7299;
            font-weight: 500;
          }
        }

        .comment-actions {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #c486a1;
          margin: 8px 0;

          .comment-time {
            margin-right: 20px;
          }

          .action-btn {
            display: flex;
            align-items: center;
            margin-right: 20px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              color: #fb7299;
            }

            &.reply {
              color: #c486a1;

              &:hover {
                color: #fb7299;
                transform: translateY(-2px);
              }
            }

            &.like,
            &.dislike {
              i {
                display: block;
                width: 16px;
                height: 16px;
                background-size: contain;
                background-repeat: no-repeat;
                margin-right: 4px;
                transition: transform 0.2s;
              }

              &:hover i {
                transform: scale(1.2);
              }

              .like-icon {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c486a1"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>');
              }

              .dislike-icon {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c486a1"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
              }

              &.active {
                color: #fb7299;

                .like-icon {
                  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fb7299"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>');
                }

                .dislike-icon {
                  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fb7299"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
                }
              }
            }

            &.more {
              margin-left: auto;

              .more-icon {
                display: block;
                width: 16px;
                height: 16px;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c486a1"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
                background-size: contain;
                background-repeat: no-repeat;
                transition: transform 0.2s;
              }

              &:hover .more-icon {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fb7299"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
              }
            }
          }
        }

        .view-all-replies {
          font-size: 13px;
          color: #c486a1;
          cursor: pointer;
          margin: 8px 0 16px;
          padding: 4px 12px;
          background-color: #fff5f7;
          border-radius: 12px;
          display: inline-block;
          transition: all 0.3s;

          &:hover {
            color: #fb7299;
            background-color: #ffe0e6;
            transform: translateY(-2px);
          }
        }

        .view-more-child-replies {
          font-size: 13px;
          color: #fb7299;
          text-align: center;
          padding: 8px 0;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            color: #fc8bab;
            transform: translateY(-2px);
          }
        }

        .up-tag {
          background-color: #fff5f7;
          color: #fb7299;
          font-size: 12px;
          display: inline-block;
          padding: 4px 10px;
          border-radius: 12px;
          margin-bottom: 16px;
          border: 1px solid #ffe0e6;
        }

        .child-comments {
          margin: 8px 0 16px 12px;
          padding-left: 12px;
          border-left: 2px solid #ffe0e6;
          background-color: #fffafc;
          border-radius: 0 12px 12px 0;

          .child-comment {
            padding: 12px 0;
            border-bottom: 1px dashed #ffe0e6;

            &:last-child {
              border-bottom: none;
            }

            .user-avatar {
              width: 36px;
              height: 36px;
            }
          }
        }

        .reply-input-area {
          .user-avatar {
            width: 36px;
            height: 36px;
          }

          .input-wrapper {
            .comment-textarea {
              height: 60px;
              box-shadow: 0 2px 4px rgba(251, 114, 153, 0.1);
            }

            .input-tools {
              .left-tools {
                .tool-btn:not(.emoji-btn) {
                  display: none;
                }

                .send-to-dynamic {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

.pagination {
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #c486a1;

  .page-info {
    font-size: 12px;
  }

  .page-controls {
    display: flex;
    align-items: center;

    .page-number,
    .page-nav {
      cursor: pointer;
      margin: 0 4px;
      padding: 2px 8px;
      border-radius: 10px;
      transition: all 0.3s;

      &.active {
        color: #fff;
        background-color: #fb7299;
      }

      &:hover:not(.active) {
        color: #fb7299;
        background-color: #fff5f7;
      }
    }

    .page-nav {
      color: #fb7299;

      &:hover {
        transform: translateX(2px);
      }
    }
  }
}

.emoji-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 380px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(251, 114, 153, 0.15);
  z-index: 1000;
  border: 1px solid #ffe0e6;
  overflow: hidden;
}

.emoji-panel-header {
  padding: 10px 16px;
  border-bottom: 1px solid #ffe0e6;
  font-size: 14px;
  background-color: #fff5f7;

  .active {
    color: #fb7299;
    font-weight: 500;
  }
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 8px;
  max-height: 195px;
  overflow-y: auto;

  .emoji {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      background-color: #fff5f7;
      transform: scale(1.1);
    }

    .emoji-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.emoji-panel-footer {
  padding: 8px;
  border-top: 1px solid #ffe0e6;
  background-color: #fff5f7;

  .emoji-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 8px;

    .tab {
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.3s;

      &.active,
      &:hover {
        opacity: 1;
      }
    }
  }
}

.at-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 280px;
  background-color: #fff;
  border: 1px solid #ffe0e6;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(251, 114, 153, 0.15);
  z-index: 1000;
  overflow: hidden;

  .at-panel-header {
    padding: 10px 16px;
    border-bottom: 1px solid #ffe0e6;
    font-size: 13px;
    color: #fb7299;
    background-color: #fff5f7;
    font-weight: 500;
  }

  .at-list {
    max-height: 300px;
    overflow-y: auto;

    .at-user {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: #fff5f7;
        transform: translateX(5px);
      }

      .at-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid #ffe6eb;
      }

      .at-user-info {
        .at-user-name {
          font-size: 14px;
          color: #7f5f69;
          margin-bottom: 4px;
        }

        .at-user-fans {
          font-size: 12px;
          color: #c486a1;
        }
      }
    }
  }
}

// 修改输入工具按钮样式，增加点击态
.tool-btn {
  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

.emoji-svg {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  pointer-events: none; // 防止SVG捕获点击事件
}

.emoji-container {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  line-height: 1;
  width: 24px;
  height: 24px;
  user-select: all; // 使得表情可以作为整体被选中
}

.at-user-mention {
  display: inline-block;
  color: #fb7299;
  font-weight: 500;
  background-color: rgba(251, 114, 153, 0.1);
  border-radius: 8px;
  padding: 0 4px;
  margin: 0 2px;
  white-space: nowrap;
  user-select: all; // 使得@标签可以作为整体被选中
}

.comment-textarea {
  width: 100%;
  height: 65px;
  padding: 10px 12px;
  border: 1px solid #ffe0e6;
  background-color: #fff5f7;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(251, 114, 153, 0.1);
  overflow-y: auto;
  color: #7f5f69;
  transition: all 0.3s;

  // 支持内容编辑
  -webkit-user-modify: read-write;
  -moz-user-modify: read-write;
  user-modify: read-write;

  &:focus {
    background-color: #fff;
    border-color: #fb7299;
    box-shadow: 0 4px 8px rgba(251, 114, 153, 0.15);
  }

  &:empty:before {
    content: attr(placeholder);
    color: #c486a1;
    pointer-events: none;
  }
}

.emoji-img {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 2px;
  object-fit: contain;
}

.at-tag {
  display: inline-block;
  color: #fb7299;
  background-color: rgba(251, 114, 153, 0.1);
  border-radius: 8px;
  padding: 0 4px;
  margin: 0 2px;
  font-weight: 500;
  white-space: nowrap;
}

.emoji-display {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 2px;

  svg {
    width: 20px;
    height: 20px;
  }
}

.at-user-display {
  display: inline-block;
  color: #fb7299;
  background-color: rgba(251, 114, 153, 0.1);
  border-radius: 8px;
  padding: 0 4px;
  margin: 0 2px;
  font-weight: 500;
  white-space: nowrap;
}
</style>
